<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.adv{
				font-size: 40px;
				color: greenyellow;
				text-align: center;
				line-height: 40px;
				border-radius: 10px;
				border: 1px solid gold;
			}
			ul{
				width: 390px; 
				border: 2px solid green;
				background-color: blanchedalmond;
			}
		</style>
		<script>
			function changeD(){
				var d=document.getElementById("d1");
				//d1.setAttribute("style","border:3px outset green;");
				d1.style.borderWidth="20px";
				d1.style.borderColor="red";
				d1.style.borderStyle="outset";
			}
			function c2(t){
				t.className="adv";
			}
			function clearP(t){
				t.className="";
			}
			function getUL(){
				var u=document.getElementById("u1");
				//alert(u.style.width);
				//var b=document.defaultView.getComputedStyle(u,null).width;
				var b=(document.defaultView.getComputedStyle(u,null)||u.currentStyle).width;
				alert(b);
			}
		</script>
	</head>
	<body>
		<div id="d1">111</div>
		<p onmouseover="c2(this)" onmouseout="clearP(this)">
			We change lives
		</p>
		<!-- <ul id="u1" style="width: 390px; border: 2px solid green;background-color: blanchedalmond;">
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul> -->
		<ul id="u1">
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
		<input type="button" value="change style" onclick="changeD()" />
		<input type="button" value="获得ul的样式" onclick="getUL()" />
	</body>
</html>
